import React, { Component } from 'react';
import { HeaderWrapper , Logo , Nav , NavItem , NavSearch , Addition , Button , SearchWrapper } from './head-style';
import { CSSTransition } from 'react-transition-group';
import { actionCreators } from './store';
import { connect } from 'react-redux';

//这是无状态组件
class Head extends Component {


	render() {
		return (
			<HeaderWrapper>
				<Logo href='/'/>
				<Nav>
					<NavItem className='left active'>首页</NavItem>
					<NavItem className='left'>下载App</NavItem>
					<NavItem className='right'>登录</NavItem>
					<NavItem className='right'>
						<i className='iconfont'>&#xe636;</i>
					</NavItem>
					<SearchWrapper>
						<CSSTransition
							in={this.props.focused}
							timeout={200}
							classNames='slide'
						>
							<NavSearch 
								className = {this.props.focused ? 'focused' : ''} 
								onFocus={this.props.handlerInputFocus}
								onBlur={this.props.handlerInputBlur}
							/>
						</CSSTransition>
						<i className= {this.props.focused ? 'focuseds iconfont' : 'iconfont'}>&#xe6cf;</i>
					</SearchWrapper>
				</Nav>
				<Addition>
					<Button className='writting'>
						<i className='iconfont'>&#xe617;</i>
						&nbsp;写文章
					</Button>
					<Button className='reg'>注册</Button>
				</Addition>
			</HeaderWrapper>
		);
	}
}





const mapStateToProps = (state) =>{

	return ({
		//focused: state.get('header').get('focused')
		focused: state.getIn(['header','focused']),
		list: state.getIn(['header','list'])
	})
}

const mapDispatchToProps = (dispatch) =>{
	return ({
		handlerInputFocus(){
			//只要使用action 不管是返回对象 还是执行函数 都要dispatch() 
			dispatch(actionCreators.getList());
			dispatch(actionCreators.getFocusedValue(true));
		},
		handlerInputBlur(){
			dispatch(actionCreators.getFocusedValue(false));
		}
	})
}

export default connect(mapStateToProps,mapDispatchToProps)(Head)
